<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            业务图层 ：
            <i-switch v-model="Platform.Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;
            <br><br>
            平台名称显示状态：
            <i-switch v-model="Platform.Label_Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;
            开启动画：
            <i-switch v-model="Platform.Ani" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>&nbsp;
            <br><br>
            连接线图层 ：<br>
            显示状态：
            <i-switch v-model="Link.Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;
            连接线颜色：
            <ColorPicker v-model="Link.Color" />&nbsp;
            标注显示状态：
            <i-switch v-model="Link.Label_Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;<br><br>
            箭头指示图层 ：<br>
            显示状态：
            <i-switch v-model="Arrow.Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;
            连接线颜色：
            <ColorPicker v-model="Arrow.Color" />&nbsp;<br><br>
            球形雷达图层 ：<br>
            显示状态：
            <i-switch v-model="Radar.Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;
            雷达罩颜色：
            <ColorPicker v-model="Radar.Color" />&nbsp;<br><br>
            锥形雷达图层 ：<br>
            显示状态：
            <i-switch v-model="Satellite.Status" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>&nbsp;
            雷达罩颜色：
            <ColorPicker v-model="Satellite.Color" />&nbsp;<br><br>

        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
let lastSelectItem = null;

let _Platform = null;
let _Link = null;
let _Arrow = null;

let _Platform_SetInterval = null;
let _Radar = null;
let _Satellite = null;
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}
// 生产随机数
export default {
    data() {
        return {
            SenceMode: '3D',
            Platform: {
                Status: true,
                Text: '',
                Label_Status: true,
                Ani: false,
            },
            Link: {
                Status: true,
                Label_Status: true,
                Color: '#F60',
            },
            Arrow: {
                Status: true,
                Color: '#F00',
            },
            Radar: {
                Status: true,
                Color: '#0F0',
            },
            Satellite: {
                Status: true,
                Color: '#00F',
            }
        }
    },
    watch: {
        'Platform.Status'(newValue) {
            // 控制业务图层显示隐藏
            // 此处没有换缓存子图层展示状态，故父子图层需要手动联动
            _Platform.show = newValue;
            this.Link.Status = newValue;
            this.Arrow.Status = newValue;
            this.Radar.Status = newValue;
            this.Satellite.Status = newValue;
        },
        'Platform.Label_Status'(newValue) {
            // 控制业务图层显示隐藏
            _Platform.LabelStatus = newValue;
        },
        'Platform.Ani'(newValue) {
            if (newValue) {
                // 动画事件
                _Platform_SetInterval = setInterval(() => {
                    _Platform.EachMapping((platform) => {
                        platform.setPosition({
                            longitude: platform.BaseEntity.Position.longitude + randomNum(-0.01, 0.01),
                            latitude: platform.BaseEntity.Position.latitude + randomNum(-0.01, 0.01),
                        })
                    })
                }, 1000)
            } else {
                _Platform_SetInterval && clearInterval(_Platform_SetInterval);
                _Platform_SetInterval = null;
            }
            // _Platform_SetInterval
        },
        'Link.Status'(newValue) {
            // 控制连接线 显示/隐藏
            _Link.show = newValue;
        },
        'Link.Color'(newValue) {
            // 控制连接线颜色
            _Link.Color = newValue;
        },
        'Link.Label_Status'(newValue) {
            // 控制连接线标注
            _Link.LabelStatus = newValue;
        },
        'Arrow.Status'(newValue) {
            // 控制连接线 显示/隐藏
            _Arrow.show = newValue;
        },
        'Arrow.Color'(newValue) {
            // 控制连接线颜色
            _Arrow.Color = newValue;
        },
        'Radar.Status'(newValue) {
            // 控制连接线 显示/隐藏
            _Radar.show = newValue;
        },
        'Radar.Color'(newValue) {
            // 控制连接线颜色
            _Radar.Color = newValue;
        },
        'Satellite.Status'(newValue) {
            // 控制连接线 显示/隐藏
            _Satellite.show = newValue;
        },
        'Satellite.Color'(newValue) {
            // 控制连接线颜色
            _Satellite.Color = newValue;
        },
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                animation: false, // 关闭默认动画事件
                senceMode: "3D", // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        map.flytochina();

        // 创建业务图层
        _Platform = new simpleMap.PlatformDataSource(map, {
            defaultNameStatus: true,
            anime: true,
            Click: true,
            RightClick: true,
        });

        // 随机生成点位集合
        var _array = [];
        for (let i = 0; i < 50; i++) {
            var _color = window.anime.random(0, 1) ? 'BLUE' : 'RED';
            _array.push({
                id: 'P' + i,
                longitude: randomNum(80, 120),
                latitude: randomNum(25, 45),
                height: randomNum(0, 1000000),
                radius: randomNum(0, 200000),
                rotation: randomNum(0, 360),
                color: _color,
                selectColor: _color,
                imageUrl: './image/plane.png',
                name: {
                    text: 'p' + i,
                    color: 'WHITE',
                    background: _color,
                },
            });
        }
        // 添加多个平台对象
        _Platform.Adds(_array);
        // 平台绑定属性事件
        _Platform.on('Click', (item) => {
            // item 为所选的平台对象
            if (item === lastSelectItem) {
                this.Platform.text = '';
                item.Point.Select = false;
                lastSelectItem = null;
            } else {
                lastSelectItem && (lastSelectItem.Point.Select = false);
                item.Point.Select = true;
                lastSelectItem = item;
                this.Platform.text = item.id;
            }
        });
        // 随机连接线 格式 [平台1ID，平台2ID];
        //  注意：[平台A ID，平台B ID] 与其反向 [平台B ID，平台A ID] 为一组，连接线创建时，已经进行过滤
        var linksT = [];
        for (let i = 0; i < _array.length; i++) {
            var t = window.anime.random(0, 3);
            for (let d = 0; d < t; d++) {
                var _i = window.anime.random(0, 5);
                var _id = [_array[i].id, _array[_i].id];
                var _rid = [_array[_i].id, _array[i].id]
                if (_i != i && !linksT.includes(_id) && !linksT.includes(_rid)) {
                    linksT.push(_id);
                }
            }
        }
        // 创建连接线图层
        _Link = _Platform.createLayer('links', { color: this.Link.Color, text: '链接', LabelStatus: this.Link.Label_Status })
        // 添加多个连接线图层
        _Link.Adds(linksT);


        _Arrow = _Platform.createLayer('arrow', { color: this.Arrow.Color, LabelStatus: this.Link.Label_Status })
        // 添加多个连接线图层
        _Arrow.Adds([['P0', 'P10'], ['P10', 'P0'], ['P20', 'P30']]);

        // 球形雷达图层
        _Radar = _Platform.createLayer('radar', { color: this.Radar.Color })
        _Radar.Adds(_array.map(item => item.id));

        // 锥形雷达图层
        _Satellite = _Platform.createLayer('satellite', { color: this.Satellite.Color })
        _Satellite.Adds(['P0', 'P10', 'P20']);



    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        // 不需要注销地图时，可单独注销图层
        // 注销时，会同步注销子图层
        _Platform && _Platform.Destroy();
        
        // 循环事件一定要关闭
        _Platform_SetInterval && clearInterval(_Platform_SetInterval);

        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>